<template>
  <div class="orderList"> 
    <div class="checkbox_box">
      <div class="checkbox_box_left">
        <el-checkbox 
          v-model="ALLCheckedStatus"
          @change="selectAll"
        >
          全选
        </el-checkbox>
      </div>
      <div class="checkbox_box_right">
        <div 
          class="buttons"
          @click="BatchConfirmation"
        >
          批量确认收货
        </div>
      </div>
    </div>
    <div class="fixTitle">
      <div style="padding-right: 19rem">
        商品
      </div>
      <div style="padding-right: 4rem">
        单价
      </div>
      <div style="padding-right: 4rem">
        数量
      </div>
      <div style="padding-right: 6rem">
        商品操作
      </div>
      <div style="padding-right: 4rem">
        实付金额
      </div>
      <div style="padding-right: 4rem">
        订单状态
      </div>
      <div>订单操作</div>
    </div>
    <div class="orderTable">
      <div
        v-for="(item,ord) in orderList"
        :key="ord"
        class="orderBox"
      >
        <div class="order">
          <div class="orderNo_box">
            <div class="orderNo">
              <div class="orderInfo">
                <div style="margin-right: .5rem">
                  <el-checkbox
                    v-model="item.CheckStatus"
                    @change="CheckClick(item,ord)"
                  />
                </div>
                <div>
                  <span class="ot">订单号</span>
                  <span class="od">{{ item.cOrderNo }}</span>
                </div>
                <div>
                  <span class="ot">下单时间</span>
                  <span class="od">{{ item.pubuts | formatDate }}</span>
                </div>
				<div v-if="item.showTime" >
				  <span class="od" style="color: red;">请于{{ item.oOrderDetails[0].deposittime.dEndDate | formatDate }}前支付尾款</span>
				</div>
              </div>
              <!-- <img
                src="../../assets/img/delete.png"
                alt=""
                @click="showDelModal(item)"
              > -->
            </div>
          </div>
          <div class="order_small_box">
            <div class="left_box">
              <div
                v-for="(items, index) in item.oOrderDetails"
                :key="index"
                class="order_small_item"
              >
                <div 
                  class="border goods" 
                  @click="GoToSho(items)"
                >
                  <img
                    :src="items.DefaultImage"
                    alt=""
                  >
                  <div class="titleBox">
                    <div class="tls">
                      {{ items.cProductName }}
                    </div>
                  </div>
                </div>

                <div
                  v-if="items.productAttribute === 1"
                  class="border box_center"
                  style="width: 4rem"
                >
                  {{ (Math.round(Number(items.fSalePrice) * 100) / 100).toFixed(2) }}
                </div>

                <div
                  v-else
                  class="border box_center"
                  style="width: 4rem"
                >
                  {{ items.salePoints }}积分
                </div>

                <div
                  class="border box_center"
                  style="width: 3rem;text-align: center;display: flex;justify-content: center;"
                >
                  {{ items.iQuantity }}
                </div>

                <div
                  class="border box_center order_status"
                  style="width: 10rem;display: flex;justify-content: center;align-items: center;"
                >
                  <div class="order_status_item">
                    {{
                      items.cSaleReturnStatusName !== ""
                        ? items.cSaleReturnStatusName
                        : ""
                    }}
                  </div>
                  <div
                    v-if="items.cSaleReturnStatus === 'SUBMITSALERETURN' || items.cSaleReturnStatus === 'BUYERRETURN' || items.cSaleReturnStatus === 'ENDSALERETURN'"
                    class="order_status_item button_style"
                    @click="DetailsRefund(items, index, items.cSaleReturnStatus)"
                  >
                    退款详情
                  </div>
                  <!-- <div
                    v-else-if="items.productAttribute === 1 && items.iCommentId === 0 && item.cNextStatus !== 'PAYMONEY'&& item.cNextStatus !== 'ENDORDER'"
                    class="order_status_item button_style"
                    @click="ApplySales(items, newStatus, index)"
                  >
                    申请售后
                  </div> -->
                </div>
              </div>
            </div>
            <div class="right_box">
              <!-- v-if="items.productAttribute === 1" -->
              <div 
                v-if="item.oOrderDetails[0].productAttribute === 1"
                class="box"
              >
                <div class="fTotalMoney">
                  {{ ((Number(item.fTotalMoney) * 100 + Number(item.iPostage) * 100) / 100).toFixed(2) }}
                </div>
                <div class="box_item">
                  含运费￥{{ ((Number(item.iPostage) * 100) / 100).toFixed(2) }}
                </div>
              </div>
              <div 
                v-else
                class="box"
              >
                <div class="fTotalMoney">
                  {{ item.oOrderDetails[0].salePoints }}积分
                </div>
              </div>
              <div class="order_status">
                {{ item.cShowNextStatusName }}
              </div>

              <div class="buttons_box">
                <!-- 待发货 -->
                <div v-if="item.cNextStatus === 'DELIVERGOODS'">
                  <div
                    class="buttons"
                    @click="goDetail(item)"
                  >
                    订单详情
                  </div>
                  <div
                    class="buttons"
                    @click="OnceBuy(item, index)"
                  >
                    再次购买
                  </div>
                  <div class="buttons">
                    添加附件
                  </div>
                  <div
                    class="buttons"
                    @click="BatchRefund(item)"
                  >
                    批量退款
                  </div>
                </div>
                <!-- 待发货END -->
                <!-- 待付款 -->
                <div v-else-if="item.cNextStatus === 'PAYMONEY'||item.cPayStatusCode === 'NOTPAYMENT'||item.showTime">
                  <div
                    class="buttons"
                    @click="Payment(item)"
                  >
                    去付款
                  </div>
                  <div
                    class="buttons"
                    @click="cancelOrder(item)"
                  >
                    取消订单
                  </div>
                  <div
                    class="buttons"
                    @click="goDetail(item)"
                  >
                    订单详情
                  </div>
                  <div
                    class="buttons"
                    @click="OnceBuy(item, index)"
                  >
                    再次购买
                  </div>
                  <div class="buttons">
                    添加附件
                  </div>
                  <!-- <div
                    class="buttons"
                    @click="BatchRefund(item)"
                  >
                    批量退款
                  </div> -->
                </div>
                <!-- 待付款END -->
                <!-- 待收货 -->
                <div v-if="item.cNextStatus === 'TAKEDELIVERY'">
                  <div
                    class="buttons"
                    @click="ConfirmGoods(item)"
                  >
                    确认收货
                  </div>
                  <div
                    class="buttons"
                    @click="CheckLogistics(item)"
                  >
                    查看物流
                  </div>
                  <div
                    class="buttons"
                    @click="goDetail(item)"
                  >
                    订单详情
                  </div>
                  <div
                    class="buttons"
                    @click="OnceBuy(item, index)"
                  >
                    再次购买
                  </div>
                  <div class="buttons">
                    添加附件
                  </div>
                  <div
                    class="buttons"
                    @click="BatchRefund(item)"
                  >
                    批量退款
                  </div>
                </div>
                <!-- 待收货END -->
                <!-- 已完成 -->
                <div v-if="item.cNextStatus === 'ENDORDER'">
                  <div
                    class="buttons"
                    @click="CheckLogistics(item)"
                  >
                    查看物流
                  </div>
                  <div
                    class="buttons"
                    @click="goDetail(item)"
                  >
                    订单详情
                  </div>
                  <div
                    class="buttons"
                    @click="OnceBuy(item, index)"
                  >
                    再次购买
                  </div>
                  <div class="buttons">
                    添加附件
                  </div>
                  <div 
                    class="buttons"
                    @click="GoToInvoice(item, index)"
                  >
                    开发票
                  </div>
                  <div
                    v-show="item.oOrderDetails[0].iCommentId === 0"
                    class="buttons"
                    @click="goComment(item)"
                  >
                    立即评论
                  </div>
                  <div
                    v-show="item.oOrderDetails[0].iCommentId > 0"
                    class="unbuttons"
                  >
                    已评论
                  </div>
                  <div
                    v-show=" item.oOrderDetails[0].cSaleReturnStatus !== 'SALERETURNING'"
                    class="buttons"
                    @click="BatchRefund(item)"
                  >
                    批量退款
                  </div>
                </div>
                <!-- 已完成END -->
                <!-- 退货 -->
                <div v-if="item.cNextStatus === 'SALERETURN'">
                  <div
                    class="buttons"
                    @click="CheckLogistics(item)"
                  >
                    查看物流
                  </div>
                  <div
                    class="buttons"
                    @click="goDetail(item)"
                  >
                    订单详情
                  </div>
                  <div
                    class="buttons"
                    @click="OnceBuy(item, index)"
                  >
                    再次购买
                  </div>
                  <div class="buttons">
                    添加附件
                  </div>
                </div>
                <!-- 退货END -->
                <!-- 已关闭 -->
                <div v-if="item.cNextStatus === 'CLOSEORDER'">
                  <div
                    class="buttons"
                    @click="OnceBuy(item, index)"
                  >
                    再次购买
                  </div>
                  <!-- <div 
                    class="buttons"
                    @click="showDelModal(item)"
                  >
                    删除
                  </div> -->
                </div>
                <!-- 已关闭END -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination_box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="PageTotal"
        :current-page.sync="pageIndex"
        @current-change="handleCurrentChange"
      />
    </div>
    <deleteModal
      ref="delModal"
      @result="delUserOrders"
      @refresh="getData"
    />
    <!-- 批量确认收货弹窗 -->
    <div
      v-if="showModalStatus"
      class="overDiv"
    >
      <div
        v-if="!showReasonModalStatsus"
        class="cancelModal"
      >
        <div class="header">
          <div class="title" />
          <div
            class="colse"
            @click="closeModalModal"
          >
            <img
              src="../../assets/img/close.png"
              alt=""
            >
          </div>
        </div>
        <div class="body">
          你确定要批量确认收货么？
        </div>
        <div class="footer">
          <div
            class="yes"
            @click="YESModalModal"
          >
            是
          </div>
          <div
            class="no"
            @click="closeModalModal"
          >
            否
          </div>
        </div>
      </div>
      <!-- 批量确认收货弹窗END -->
    </div>
  </div>
</template>

<script>
import deleteModal from "../common/deleteModal.vue";
export default {
  components: {
    deleteModal,
  },
  _props: ["status", "search"],
  get props() {
    return this._props;
  },
  set props(value) {
    this._props = value;
  },
  data() {
    return {
      newStatus: "",
      showModal: false,
      orderList: [],
      count: "",
      pageIndex: 1,
      pageSize: 10,
      currentItem: {},
      PageTotal: 0,
      newSearchForm: {
        searchTimer: [],
      },
      SearchForm: {
        searchTimer: [],
      },
      ALLCheckedStatus: false, // 全选状态
      ALLCheckedData: [], // 选择的数据
      showModalStatus:false,
      showReasonModalStatsus: false,
    };
  },
  watch: {
    status: function () {
      this.newStatus = this.status;
      console.log(this.newStatus);
      this.orderList = [];
      this.ALLCheckedData =  [], // 选择的数据
      this.ALLCheckedStatus = false
      this.SearchForm = {
        searchTimer: [],
      };
      this.pageIndex = 1;
      this.getData(this.newStatus, this.SearchForm);
    },
  },

  created() {
    this.newStatus = this.status;
    console.log(this.newStatus);
  },
  mounted() {
    //获取订单列表
    this.getData(this.newStatus, this.SearchForm);
  },

  methods: {
    // 全选
    selectAll(e) {
      console.log('全选', e)
      if (e) {
        this.orderList.forEach(element => {
          this.$set(element, "CheckStatus", true);
        })
        this.ALLCheckedData = this.orderList
      } else {
        this.orderList.forEach(element => {
          this.$set(element, "CheckStatus", false);
        })
        this.ALLCheckedData = []
      }
    },
    // 获取批量选择
    CheckClick() {
      let CheckedCitiesArr = []
      for(let i in this.orderList) {
        if(this.orderList[i].CheckStatus){
          CheckedCitiesArr.push(this.orderList[i])
        }
      } 
      console.log('获取批量选择',CheckedCitiesArr, this.orderList)
      this.ALLCheckedData = CheckedCitiesArr
      if (this.ALLCheckedData.length === this.orderList.length) {
        console.log('全选开')
        this.ALLCheckedStatus = true
      } else {
        console.log('全选关')
        this.ALLCheckedStatus = false
      }
    },
     // 关闭取消订单 弹窗
    closeModalModal() {
      this.showModalStatus = false
    },
    // 批量确认收货
    BatchConfirmation() {
      if(this.ALLCheckedData.length === 0) {
        this.$message.error('请选择要收货的订单');
      } else {
        if( this.newStatus === 'TAKEDELIVERY') {
          this.showModalStatus = true // 呼出模态框
        } else {
          this.$message.error('你选中的商品中有的商品不能确认收货，请重新选择！');
        }
        
      }
    },
    // 确认
    YESModalModal() {
      console.log('确认', this.ALLCheckedData)
      let cOrderNoArr = []
      this.ALLCheckedData.forEach( element => {
        cOrderNoArr.push(element.cOrderNo)
      })
      this.YESBatApi(cOrderNoArr)
    },
    // 确认收货api
    YESBatApi(cOrderNo) {
      let params = {
          token: localStorage.getItem("token"),
          data: {
            cOrderNo: cOrderNo,
          },
        };
        this.$api.person.batchConfirmTake(params).then((res) => {
          console.log("qqq", res, this.status);
          if (res.code == 200) {
            this.$message.success("确认收货成功");
            this.showModalStatus = false // 关闭
            this.getData(this.newStatus, this.SearchForm);
          } else {
            this.$message.error(res.message);
          }
        })
    },
    // 获取搜索对象
    SearchObj(SearchObj) {
      this.SearchForm = SearchObj;
      console.log("SearchObjasasassa", SearchObj, this.SearchForm);
      if (SearchObj.searchTimer === null) {
        this.SearchForm.searchTimer = [];
      }
      this.getData(this.newStatus, this.SearchForm);
    },
    //取消订单
    cancelOrder(item) {
      this.currentItem = item;
      this.$refs.delModal.showM("cancel");
      this.$refs.delModal.getItem(item);
      this.$refs.delModal.newStatus(this.newStatus);
    },
    // 去详情
    GoToSho(GoToSho) {
      console.log("去详情", GoToSho);
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: GoToSho.iProductId,
          iShopId: GoToSho.iShopId
        },
      });
    },
    //关闭取消订单 弹窗
    closeModal() {
      this.showModal = false;
    },
    //查看详情
    goDetail(goDetail) {
      //待收货 跳转详情
      console.log("查看详情", goDetail);
      // if (this.newStatus == 3) {
      // this.$emit('goDetail', id);
      // }
      this.$router.push({
        path: "/person/orderDetail",
        query: {
          cOrderNo: goDetail.cOrderNo,
        },
      });
    },
    // 去开发票
    GoToInvoice(item) {
      console.log('去开发票', item)
      this.$router.push({
        path: "/person/invoice",
        query: {
          cOrderNo: item.cOrderNo,
        },
      });
    },
    //去评价
    goComment(item) {
      this.$router.push({
        path: "/person/comment",
        query: {
          cOrderNo: item.cOrderNo,
        },
      });
    },
    // 申请退款
    sendReturn(item, newStatus) {
      console.log("申请退款", item, newStatus);
      if (newStatus === "DELIVERGOODS") {
        // 待发货
        this.$router.push({
          path: `/person/de-exchange?orderNo=${item.cOrderNo}`,
        });
      } else if (newStatus === "TAKEDELIVERY") {
        // 待收货
        this.$router.push({
          path: `/person/exchange?orderNo=${item.cOrderNo}`,
        });
      } else {
        // 全部订单售后
        this.$router.push({
          path: `/person/exchange?orderNo=${item.cOrderNo}`,
        });
      }
    },
    // 申请售后
    ApplySales(ApplySales,newStatus, index) {
      console.log('申请售后',JSON.parse(JSON.stringify(ApplySales)), newStatus)
      this.$router.push({
        path: `/person/exchange?orderNo=${ApplySales.cOrderNo}&index=${index}&Modify=${true}&PageType=${'ApplySales'}`,
      })
    },
    // 批量退款
    BatchRefund(BatchRefund){
      console.log('批量退款', BatchRefund)
      this.$router.push({
        path: "/person/de-exchange",
        query: {
          orderNo: BatchRefund.cOrderNo,
        },
      });
    },
    // 取消退款
    CancelRefund(item) {
      console.log("取消退款", JSON.parse(JSON.stringify(item)));
      this.$refs.delModal.showM("CancelRefund");
      this.$refs.delModal.getItem(item);
      this.$refs.delModal.newStatus(this.newStatus);
    },
    // 查看物流
    CheckLogistics(item) {
      console.log("查看物流", item);
      this.$router.push({
        path: "/person/checklogistics",
        query: {
          cOrderNo: item.cOrderNo,
        },
      });
    },
    // 退款详情
    DetailsRefund(items, index, cSaleReturnStatus) {
      console.log("退款详情", items, index, cSaleReturnStatus);
      this.$router.push({
        path: "/person/returnlistorderdetail",
        query: {
          cOrderNo: items.cOrderNo,
          cSaleReturnNo: items.cSaleReturnNo,
          index: index,
          cSaleReturnStatus: cSaleReturnStatus,
        },
      });
      
    },
    // 确认收货
    ConfirmGoods(item) {
      console.log("确认收货", item);
      this.$refs.delModal.showM("ConfirmGoods");
      this.$refs.delModal.getItem(item);
      this.$refs.delModal.newStatus(this.newStatus);
    },
    // 再次购买
    OnceBuy(OnceBuy) {
      console.log("再次购买", JSON.parse(JSON.stringify(OnceBuy.oOrderDetails)));
      OnceBuy.oOrderDetails.forEach(element => {
        this.AddCar(element)
      });
    },
    // 加入购物车
    AddCar(AddCar) {
      console.log('加入购物车', AddCar)
      let params = {
        token: localStorage.getItem("token"),
        data: [
          {
            iSKUId: AddCar.iSKUId,
            iProductId: AddCar.iProductId,
            onLineOffLine: 0,
            iQuantity: AddCar.iQuantity,
            dlyType: AddCar.dlyType,
          },
        ],
      };
      this.$api.good.addCarts(params).then((res) => {
        console.log("addCarts", res);
        if (res.code == 200) {
          // this.$message.success(res.message);
          this.$router.push({
            path: "/cart",
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 分页获取当前页
    handleCurrentChange(val) {
      console.log("分页获取当前页", val);
      this.pageIndex = val;
      this.ALLCheckedStatus = false
      this.getData(this.newStatus, this.SearchForm);
    },
    //获取订单列表
    getData(statusName, SearchForm) {
      if (!SearchForm) {
        SearchForm = {
          searchTimer: [],
        };
      }
      let params = {
        token: localStorage.getItem("token"),
        onLineOffLine: 0, // 线上线下，1-线下扫码购订单，0-线上普通订单）
        orderType: 2, // 订单类型,1-拼团订单，2-商城其他订单(全部，线上，线下）,3-零售门店订单
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        status: statusName,
        product: SearchForm.searchGoodsName, // string   商品名称
        searchOrderNo: SearchForm.searchOrderNo, // string 订单编号（已有）
        searchReceiver: SearchForm.searchReviceName, // string 收货人
        startDate: SearchForm.searchTimer[0], // Array, 成交日期，[开始时间,结束时间]，如：['2021-03-17','2021-04-13']
        endDate: SearchForm.searchTimer[1],
      };
      this.$api.person.getUserOrders(params).then((res) => {
        if (res.code == 200) {
          console.log("获取订单列表", JSON.parse(JSON.stringify(res.data)));
          res.data.orders.forEach(element =>{
            this.$set(element, "CheckStatus", false);
          })
          this.orderList = res.data.orders; // 订单列表
          this.PageTotal = res.data.count; // 总条目数
		  this.orderList.forEach(item=>{
			  if(item.fDepositMoney&&item.fDepositMoney>0&&item.cNextStatus == 'PAYMONEY'&&item.cPayStatusCode=='DEPOSITPAYMENT'){
				  let start = (new Date(item.oOrderDetails[0].deposittime.dStartDate)).getTime()
				  let end = (new Date(item.oOrderDetails[0].deposittime.dEndDate)).getTime()
				  let date = (new Date()).getTime()
				  if(date>=start&&date<end){
					  this.$set(item,"showTime",true)
				  }else{
					  this.$set(item,"showTime",false)
				  }
			  }
			  
		  })
        }
      });
    },
    //删除订单弹窗
    showDelModal(item) {
      this.$refs.delModal.showM("delete", "order");
      this.$refs.delModal.newStatus(this.newStatus);
      this.$refs.delModal.getItem(item);
      this.currentItem = item;
    },
    //删除订单
    delUserOrders(e) {
      console.log(e);
      let item = this.currentItem;
      let params = {
        token: localStorage.getItem("token"),
        orderIds: item.id,
      };
      this.$api.person.delUserOrders(params).then((res) => {
        if (res.code == 200) {
          // console.log(res.data);
          this.getData();
          this.$emit("delOrder", true);
          this.$message.success(res.message);
        }
      });
    },
    // 付款
    Payment(Payment) {
      console.log("Payment", Payment.iPostage, Payment.fPayMoney,  (((Payment.iPostage+Payment.fPayMoney)*1000)/1000).toFixed(2));
      let paydata = {
        cOrderNo: Payment.cOrderNo, // 订单号
        paytype: 1, // 支付类型(1：表示线上支付, 2: 线下支付)
        remark: "营家支付", // 标记
        paytypecode: "construct", // 支付方式（chanpay：畅捷支付，alipay：支付宝支付,weixin:微信支付， construct：营家支付）
        payBackUrl: "/client/Pay/payNotify?paytypecode=construct",
      };
      let par = {
        token: localStorage.getItem("token"),
        data: paydata,
      };
      this.$api.good.buildPayment(par).then((res) => {
        if (res.code == 200) {
          let type = "CASHIER_PAY_PC";
		  
		  let shop = []
		  
		  if(Payment.fDepositMoney&&Payment.fDepositMoney>0){
			  shop = [{
			  			  id: res.data.iShopId,
			  			  price: res.data.iAmount.toFixed(2),
			  			  postPrice: Payment.iPostage,
			  			  amount: res.data.iAmount.toFixed(2)
			  }]
		  }else{
			  shop = [{
			  			  id: res.data.iShopId,
			  			  price: Payment.fPayMoney,
			  			  postPrice: Payment.iPostage,
			  			  amount: res.data.iAmount.toFixed(2)
			  }]
		  }
          let paramsdata = {
            token: localStorage.getItem("token"),
            uid: JSON.parse(localStorage.getItem("userInfo")).mid,
            pay_no: res.data.cPayNo,
            order_no: Payment.cOrderNo,
            // page_url: `http://youyou.tangmu.xin/pc/#/payType?cOrderNo=${Payment.cOrderNo}&type=1`, // 测试
            page_url: `https://mall.inja.com/#/payType?cOrderNo=${Payment.cOrderNo}&type=1`,  // 正式
            amount: res.data.iAmount.toFixed(2),
            type: type,
			shop:shop
          };
          this.$api.good.pay(paramsdata).then((res) => {
            if (res.code == 1) {
              let ur = this.urlEncode(res.data);
              let xx = ur.substr(0, 1);
              let yy = ur.replace(xx, "?");
              console.log("跳转支付PAY", yy);
              window.location.href = "https://ipay.inja.com/gateway/cashier/acquiring?dd=1" + ur; //正式环境
              // window.location.href = "http://ipay.ysyec.com/gateway/cashier/acquiring?dd=1" + ur; //测试环境
            }
          });
        }
      });
    },
    
    //转码
    urlEncode(param, key, encode) {
      if (param == null) return "";
      var paramStr = "";
      var t = typeof param;
      if (t == "string" || t == "number" || t == "boolean") {
        paramStr +=
          "&" +
          key +
          "=" +
          (encode == null || encode ? encodeURIComponent(param) : param);
      } else {
        for (var i in param) {
          var k =
            key == null
              ? i
              : key + (param instanceof Array ? "[" + i + "]" : "." + i);
          paramStr += this.urlEncode(param[i], k, encode);
        }
      }
      return paramStr;
    }
  },
};
</script>

<style scoped lang="scss">
.orderList {
  margin: 1.25rem 0;
  .checkbox_box{
    display: flex;
    justify-content: space-between;
    height: 3.13rem;
    padding: 0 2.19rem;
    align-items: center;
    color: #333;
    background: #fff;
    .buttons{
      padding: .31rem 1.19rem;
      border: .06rem solid #999;
      color: #666;
      background: #fff;
      outline: none;
      font-size: .8rem;
      border-radius: .24rem;
      margin-left: 1.56rem;
      cursor: pointer; //鼠标变小手
    }
    
  }
  .fixTitle {
    height: 3.13rem;
    background: #fff;
    line-height: 3.13rem;
    font-size: 0.88rem;
    color: #333;
    display: flex;
    flex-direction: row;
    padding: 0 2.19rem;
  }

  .orderTable {
    // height: 62rem;
    // overflow-y: scroll;
    max-height: 54rem;
    overflow: auto;
  }

  .orderBox {
    // height: 15.81rem;
    background: #fff;
    margin-bottom: 0.56rem;

    .order {
      .orderNo_box {
        .orderNo {
          background-color: #f6f6f6;
          height: 3rem;
          line-height: 3rem;
          display: flex;
          flex-direction: row;
          padding: 0 1.44rem 0 2.19rem;
          font-size: 0.75rem;
          justify-content: space-between;
          align-items: center;

          .orderInfo {
            display: flex;
            flex-direction: row;

            > div {
              margin-right: 2.69rem;

              .ot {
                color: #666;
                padding-right: 0.75rem;
              }

              .od {
                color: #7b7b7b;
              }
            }
          }

          > img {
            width: 0.88rem;
            height: 0.94rem;
            vertical-align: middle;
            cursor: pointer;
          }
        }
      }

      .order_small_box {
        display: flex;
        align-items: center;
        .left_box {
          .order_small_item {
            display: flex;
            height: 8rem;
            align-items: center;
            width: 40.5rem;
            margin-right: 2rem;
            .goods {
              width: 27rem;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              > img {
                width: 6rem;
                height: 6rem;
                cursor: pointer;
                margin-right: 0.69rem;
              }
              .titleBox {
                font-size: .8rem;
                line-height: 1.4rem;
              }
            }
            .box_center {
              display: flex;
              align-items: center;
              height: 6rem;
            }
            .order_status {
              display: flex;
              flex-direction: column;
              height: 6rem;
              font-size: 0.8rem;
              align-items: center;
              justify-content: center;
              line-height: 1.5rem;
            }
            .button_style {
              color: #f0406f;
              cursor: pointer; //鼠标变小手
            }
            .border {
              border-bottom: 1px solid #e8e8e8;
              padding: 1rem;
            }
          }
        }
        .right_box{
          display: flex;
          .box{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 6rem;
            .box_item{
              background: #000;
              border-radius: 10px;
              color: #fff;
              font-size: .8rem;
              margin-top: .6rem;
              padding: .6rem .5rem;
            }
          }
          .order_status{
            align-items: center;
            display: flex;
            justify-content: center;
            width: 9rem;
            font-size: .8rem;
          }
          .buttons_box{
            display: flex;
            flex-direction: column;
            width: 6rem;
            justify-content: center;
            align-items: center;
            .buttons{
              color: #f0406f;
              cursor: pointer;
              margin: .4rem 0;
              font-size: .8rem;
            }
            .unbuttons{
              color: #666;
              cursor: pointer;
              margin: .4rem 0;
              font-size: .8rem;
            }
          }
        }
      }
    }
  }
  
  .pagination_box {
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }

  .overDiv {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);

    .cancelModal2 {
      position: absolute;
      height: 31.69rem;
      width: 39rem;
      padding: 1.25rem;
      left: 50%;
      margin-left: -16.5rem;
      top: 50%;
      margin-top: -9.5rem;
      background: rgba(255, 255, 255, 1);
      z-index: 1001;

      .header {
        padding-top: 3.25rem;
        padding-left: 3.38rem;

        .title {
          font-size: 1.13rem;
          color: #333;
        }
      }

      .body {
        display: flex;
        flex-direction: column;
        padding-top: 3.56rem;

        .tips {
          width: 26rem;
          height: 9.19rem;
          font-size: 1rem;
          margin: 2rem auto 2.69rem auto;
          padding-left: 2rem;

          > div {
            line-height: 2rem;
          }

          ul {
            li {
              list-style: disc;
              font-size: 0.88rem;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 1.38rem;
            }
          }
        }
      }

      .footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        line-height: 2.56rem;

        .yes {
          width: 9.5rem;
          height: 2.5rem;
          background: rgba(0, 0, 0, 1);
          color: #fff;
          font-size: 1.13rem;
          border: 0.06rem solid #333;
          margin-right: 5.69rem;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }

        .no {
          width: 9.5rem;
          height: 2.5rem;
          background: rgba(255, 255, 255, 1);
          color: #333;
          font-size: 1.13rem;
          border: 0.06rem solid #333;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }

    .cancelModal {
      position: absolute;
      // height: 19rem;
      width: 33.19rem;
      padding: 1.25rem;
      left: 50%;
      margin-left: -16.5rem;
      top: 50%;
      margin-top: -9.5rem;
      background: rgba(255, 255, 255, 1);
      z-index: 1001;

      .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .titles {
          font-size: 1.13rem;
          color: #666666;
          padding: 0.4rem 0 0 0.5rem;
        }

        .colse {
          cursor: pointer;
          width: 1.88rem;
          height: 1.88rem;

          > img {
            width: 100%;
            height: 100%;
          }

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .body {
        padding: 2.5rem 0;
        text-align: center;
        font-size: 1.13rem;
        color: #333;
      }

      .footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        line-height: 2.56rem;

        .yes {
          width: 8.19rem;
          height: 2.56rem;
          background: rgba(0, 0, 0, 1);
          color: #fff;
          font-size: 1.13rem;
          border: 0.06rem solid #333;
          margin-right: 5.69rem;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }

        .no {
          width: 8.19rem;
          height: 2.56rem;
          background: rgba(255, 255, 255, 1);
          color: #333;
          font-size: 1.13rem;
          border: 0.06rem solid #333;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
<style>
.pagination_box
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: rgba(17, 17, 17, 1);
  color: #fff;
}

.pagination_box .el-pagination.is-background .el-pager li:hover {
  color: rgba(17, 17, 17, 1);
}
</style>

<style>
 .el-checkbox__input.is-checked .el-checkbox__inner, 
 .el-checkbox__input.is-indeterminate .el-checkbox__inner{
   background-color: #f03f6e !important;
   border-color: #f03f6e !important;
 }
 .el-checkbox__input.is-checked+.el-checkbox__label{
   color: #999 !important;
 }
 .el-checkbox__inner:hover{
    border-color: #f03f6e !important;
 }
 .el-checkbox__input.is-focus .el-checkbox_inner {
    border-color: #f03f6e !important;
 }
</style>